<div class="shrink-0 flex justify-start items-center overflow-hidden">
    <span class="whitespace-nowrap text-ellipsis overflow-hidden">{{ title$() }}</span>
    <div *ngIf="displayMembers()" class="ngm-input-control__selected-members flex justify-between items-center overflow-hidden">
        <span class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{displayMembers()}}</span>
        <mat-icon class="members-clear cursor-pointer rounded-full hover:bg-gray-500/10 dark:hover:bg-white/20"
            displayDensity="compact"
            ngmAppearance="danger"
            (click)="clearSelectedMembers()">close</mat-icon>
    </div>
</div>

<div class="flex-1 relative flex flex-col justify-start items-center p-1 overflow-visible">
  @if (error()) {
    <mat-error class="whitespace-normal overflow-auto">
        {{error()}}
    </mat-error>
  } @else {
    @switch (propertyType()) {
      @case (INPUT_CONTROL_TYPE.Datepicker) {
        <ngm-member-datepicker class="w-full justify-self-start"
            [label]="options?.label"
            [placeholder]="options?.placeholder"
            [appearance]="styling?.appearance?.appearance"
            [displayDensity]="styling?.appearance?.displayDensity"
            [dataSettings]="_dataSettings()"
            [dimension]="dimension()"
            [selectionType]="options?.selectionType"
            [granularity]="options?.granularity"
            [granularitySequence]="options?.granularitySequence"
            [formatter]="options?.formatter"
            [defaultValue]="options?.defaultValue"
            [(date)]="dates"
            [ngModel]="_slicer()"
            (ngModelChange)="onSlicerChange($event)"
        >
        </ngm-member-datepicker>
      }
      @case (INPUT_CONTROL_TYPE.Select) {
        <ngm-member-list class="w-full flex-1"
            [appearance]="styling?.appearance"
            [dataSettings]="_dataSettings()"
            [dimension]="dimension()"
            [options]="__options$ | async"
            [ngModel]="_slicer()"
            (ngModelChange)="onSlicerChange($event)"
        ></ngm-member-list>
      }
      @case (INPUT_CONTROL_TYPE.TreeSelect) {
        <ngm-member-tree class="w-full flex-1"
            [appearance]="styling?.appearance"
            [dataSettings]="_dataSettings()"
            [dimension]="dimension()"
            [options]="__options$ | async"
            [ngModel]="_slicer()"
            (ngModelChange)="onSlicerChange($event)"
        />
      }
      @case (INPUT_CONTROL_TYPE.DropDownList) {
        <ngm-smart-filter class="w-full justify-self-start" [label]="''"
            [appearance]="styling?.appearance"
            [dataSettings]="_dataSettings()"
            [dimension]="dimension()"
            [options]="__options$ | async"
            [ngModel]="_slicer()"
            (ngModelChange)="onSlicerChange($event)"
        />
      }
      @case (INPUT_CONTROL_TYPE.MeasureControl) {
        @if (measureControlProperty(); as property) {
            <mat-chip-listbox aria-label="Measure selection" class="w-full flex-1"
                aria-orientation="vertical"
                [aria-orientation]="options?.ariaOrientation"
                [hideSingleSelectionIndicator]="options?.hideSingleSelectionIndicator"
                [(ngModel)]="measure"
                >
                <mat-chip-option *ngFor="let measure of availableMeasures(); trackBy: trackByName" selectable [color]="options?.chipColor"
                    [highlighted]="options?.highlighted"
                    [value]="measure.name"
                    >
                    <ngm-display-behaviour [option]="{key: measure.name, caption: measure.caption}"
                        [displayBehaviour]="property.displayBehaviour">
                    </ngm-display-behaviour>
                </mat-chip-option>
            </mat-chip-listbox>
        }
      }
      @case (INPUT_CONTROL_TYPE.Parameter) {
        <ngm-parameter class="w-full flex-1"
            [dataSettings]="_dataSettings()"
            [options]="options"
            [appearance]="styling?.appearance"
            [displayBehaviour]="dimension()?.displayBehaviour"
            [parameter]="parameter()"
            (parameterChange)="updateParameterValue($event)"
        >
        </ngm-parameter>
      }
      @case (INPUT_CONTROL_TYPE.Variable) {
        @if (controlType() === INPUT_CONTROL_TYPE.DropDownList) {
            <ngm-variable class="w-full justify-self-start" [label]="''"
                [dataSettings]="_dataSettings()"
                [variable]="variableProperty()"
                [ngModel]="_slicer()"
                (ngModelChange)="onVariableChange($event)"
            />
        } @else {
            <ngm-member-list class="w-full flex-1"
                [appearance]="styling?.appearance"
                [dataSettings]="_dataSettings()"
                [dimension]="variableProperty()"
                [options]="__options$ | async"
                [ngModel]="_slicer()"
                (ngModelChange)="onVariableChange($event)"
            />
        }
      }
      @default {
        <div class="ngm-input-control__select-model w-full flex-1">
        </div>
      }
    }
  }
</div>

<div *ngIf="editable && asPlaceholder()" class="ngm-story-widget__placeholder absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
    <pac-input-control-placeholder class="absolute left-0 top-0 max-w-full max-h-full cursor-pointer" (click)="openDesigner()"/>
    <span class="ngm-story-widget__placeholder-title">
        {{ 'Story.Widgets.InputControl.Title' | translate: {Default: 'Input Control'} }}
    </span>
</div>

<mat-menu #widgetInputControl="matMenu" class="ngm-density__compact">
    <button mat-menu-item [matMenuTriggerFor]="entityMenu">
        {{ 'Story.Widgets.InputControl.ENTITY' | translate: {Default: 'Entity'} }}
    </button>
    <mat-divider></mat-divider>
    <!-- <ng-container *ngIf="entitySet$ | async">
        <button mat-menu-item [matMenuTriggerFor]="Dimensions">
            {{ 'Story.Widgets.InputControl.DIMENSIONS' | translate: {Default: 'Dimensions'} }}
        </button>

    </ng-container> -->
</mat-menu>

<mat-menu #entityMenu="matMenu" class="ngm-density__compact">
    <!-- <button mat-menu-item *ngFor="let entity of entities$ | async"
        (click)="setEntitySet(entity.value);$event.stopPropagation()">
        <ngm-display-behaviour [option]="entity"></ngm-display-behaviour>
    </button> -->
</mat-menu>


<mat-menu #Dimensions="matMenu" class="ngm-density__compact">
    <button mat-menu-item *ngFor="let dimension of dimensions$ | async"
        (click)="setProperty(dimension.name)">
        <ngm-entity-property [property]="dimension"></ngm-entity-property>
    </button>
</mat-menu>

<mat-menu #Measures="matMenu" class="ngm-density__compact">
    <button mat-menu-item *ngFor="let measure of measures$ | async">
        <ngm-entity-property [property]="measure"></ngm-entity-property>
    </button>
</mat-menu>
